<script setup>
import { ref, onMounted, watch, computed } from "vue";

import { getAdcodeByIp, getWeatherByAdcode } from "@/apis";

//路由
import { useRouter } from "vue-router";

//pinia
import { storeToRefs } from "pinia";

import { useCityList } from "@/stores/cityList";

//模态框状态
const open = ref(false);

//监控路由：是否在info页面 ,在的话，判断添加城市按钮
const isInfoPage = computed(() => {
  return router.currentRoute.value.path === "/info";
});

const router = useRouter();
//点击logo跳转到搜索页面
const handleRouterLink = () => {
  router.push("/search");
};

const cityListmanager = useCityList();

const { currentCity, isCurrentCityInList } = storeToRefs(cityListmanager);

const { addCity } = cityListmanager;

//本地天气数据
const localWeatherInfo = ref({});

//导航栏展示ip属地的天气
onMounted(async () => {
  // 获取ip所在地的adcode
  const res = await getAdcodeByIp();
  const adcode = res.adcode;
  // 获取ip所在地的天气
  const { lives } = await getWeatherByAdcode(adcode, "base");
  localWeatherInfo.value = lives[0];
});
</script>

<template>
  <nav
    class="container flex flex-col sm:flex-row items-center gap-4 text-white py-6"
  >
    <a
      href=""
      @click.prevent="handleRouterLink()"
      class="router-link-active router-link-exact-active"
    >
      <div class="flex items-center gap-3">
        <i class="fa-solid fa-sun text-2xl"></i>
        <p class="text-2xl">新中地天气</p>
      </div>
    </a>
    <div class="flex gap-4 items-center">
      <h4 class="text-lg">{{ localWeatherInfo.city }}</h4>
      <span class="text-sm"
        >实时天气：{{ localWeatherInfo.weather }}
        {{ localWeatherInfo.temperature }}°C</span
      >
      <span class="text-sm"
        >{{ localWeatherInfo.winddirection }}风
        {{ localWeatherInfo.windpower }}级</span
      >
    </div>
    <div class="flex gap-3 flex-1 justify-end">
      <i
        class="fa-solid fa-circle-info text-xl hover:text-weather-secondary cursor-pointer duration-1000"
        @click="open = true"
      ></i>
      <i
        v-if="isInfoPage && !isCurrentCityInList"
        class="fa-solid fa-plus text-xl hover:text-weather-secondary duration-150 cursor-pointer"
        @click="addCity(currentCity.adcode, currentCity.cityName)"
      ></i>
    </div>
  </nav>
  <Teleport to="body">
    <Transition>
      <div
        class="fixed z-20 w-full bg-black bg-opacity-30 h-screen top-0 left-0 flex justify-center px-8 text-black"
        :class="{ hidden: !open }"
      >
        <div class="p-4 bg-white self-start mt-32 max-w-screen-md">
          <h2>关于：</h2>
          <p class="text-xs mb-4">这个应用可以用来追踪你选择城市的当前天气</p>
          <h2>如何使用：</h2>
          <p class="text-xs mb-4">
            1.点击搜索框输入你希望追踪的城市<br />
            2.在搜索结果中选中一个城市，你将获取当地最新的天气<br />
            3.点击右侧的＋号可以将追踪城市的天气情况保存在首页
          </p>
          <h2>移除城市：</h2>
          <p class="text-xs">
            如果你不想在首页关注某个城市,可以通过底部的按钮删除它
          </p>
          <div class="btn">
            <button
              class="text-white mt-8 bg-weather-first py-2 px-6 text-xs"
              @click="open = false"
            >
              关闭
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.hover\:text-weather-secondary:hover {
  --tw-text-opacity: 1;
  color: rgb(0 78 113 / var(--tw-text-opacity));
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>